import React, {useContext} from 'react';
import GlobalContext from '@/GlobalContext';
import {View, Text} from 'react-native';
import {Button} from '@rneui/base';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const TabStack = createBottomTabNavigator();

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Icon from './Icon';

import Message from './Message';
import Email from './Email';
import Doc from './Doc';
import Work from './Work';
import Book from './Book';

const routeParentPath = 'WxBus';
const App = ({setOpen, prevOpen}) => {
  const {navigationRef} = useContext(GlobalContext);
  return (
    <TabStack.Navigator screenOptions={{headerShown: false, animation: 'slide_from_right'}}>
      <TabStack.Screen
        name={`${routeParentPath}/Message`}
        component={Message}
        options={{
          title: '消息',
          tabBarIcon: ({color}) => (
            <Icon name="Message" color={color} width={24} height={24} />
          ),
          headerShown: true,
          headerLeft: props => (
            <FontAwesome5
              name="align-left"
              size={16}
              onPress={() => setOpen(prevOpen => !prevOpen)}
              style={{
                marginLeft: 10,
              }}
            />
          ),
          headerTitleStyle: {},
          headerStyle: {},
          headerRight: props => (
            <Text
              onPress={() => {
                navigationRef?.navigate('Home');
              }}
              style={{
                marginRight: 10,
              }}>
              Go Home
            </Text>
          ),
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Email`}
        component={Email}
        options={{
          title: '邮件',
          tabBarIcon: ({color}) => (
            <Icon name="Email" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Doc`}
        component={Doc}
        options={{
          title: '文档',
          tabBarIcon: ({color}) => (
            <Icon name="Doc" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Work`}
        component={Work}
        options={{
          title: '工作台',
          tabBarIcon: ({color}) => (
            <Icon name="Work" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
      <TabStack.Screen
        name={`${routeParentPath}/Book`}
        component={Book}
        options={{
          title: '通讯录',
          tabBarIcon: ({color}) => (
            <Icon name="Book" color={color} width={24} height={24} />
          ),
          headerShown: false,
        }}
      />
    </TabStack.Navigator>
  );
};

import {Drawer} from 'react-native-drawer-layout';

export default ({navigation}) => {
  const [open, setOpen] = React.useState(true);
  return (
    <Drawer
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      drawerStyle={{
        // width: '85%',
        width: 305,
      }}
      drawerType='slide'
      renderDrawerContent={() => {
        return (
          <View style={{flex: 1}}>
            <View style={{flex: 1,alignItems: "center",justifyContent: "center"}}>
              <Text>内容</Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: 10,
                backgroundColor: '#f9f9f9',
              }}>
              <Text>高级功能</Text>
              <FontAwesome5
                name="cog"
                size={26}
                onPress={() => {
                  navigation.navigate(`${routeParentPath}/Setting`);
                }}
                style={{
                  marginRight: 10,
                }}
              />
            </View>
          </View>
        );
      }}>
      <App setOpen={setOpen} prevOpen={open} />
    </Drawer>
  );
};
